<template>
	<div class="container">
    <div class="handle-box">
      <el-input v-model="searchInput" placeholder="话题" style="width: 300px;margin-right: 15px"/>
      <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
      <el-button type="primary" :icon="Plus" @click="editShowOrHide(-1)">新增</el-button>
    </div>
    <el-table :data="topicData" border class="table" ref="multipleTable" header-cell-class-name="table-header" height="530">
      <el-table-column prop="topic_id" label="ID" width="55" align="center"></el-table-column>
      <el-table-column prop="topic_name" label="话题" align="center"></el-table-column>
      <el-table-column prop="topic_desc" label="话题信息" align="center"></el-table-column>
      <el-table-column prop="parent_topic_id" label="父话题ID" align="center"></el-table-column>
      <el-table-column prop="followed_count" label="话题关注数" align="center"></el-table-column>
      <el-table-column fixed="right" label="操作" width="220" align="center">
        <template #default="scope">
          <el-button link :icon="Edit" type="primary" @click="editTopic(scope.$index)">
            编辑
          </el-button>
<!--          <el-button link :icon="Delete" type="danger" @click="deleteTopic(scope.$index)">-->
<!--            删除-->
<!--          </el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="showEdit.flag">
      <div style="display: flex; gap: 20px; justify-content: center; margin-bottom: 20px">
        <span style="width: 100px">话题名</span>
        <el-input v-model="editor[0]" placeholder="话题名" style="width: 300px" clearable />
      </div>
      <div style="display: flex; gap: 20px; justify-content: center; margin-bottom: 20px">
        <span style="width: 100px">话题描述</span>
        <el-input type="textarea" v-model="editor[1]" placeholder="话题描述" style="width: 300px" clearable resize="none" />
      </div>
      <div style="display: flex; gap: 20px; justify-content: center; margin-bottom: 20px">
        <span style="width: 100px">父话题</span>
        <el-select v-model="editor[2]" placeholder="父话题" style="width: 300px">
          <el-option v-for="topic in parentTopics" :label="topic.topic_name" :key="topic.topic_id" :value="topic.topic_id"/>
        </el-select>
      </div>
      <div style="display: flex; justify-content: center; gap: 20px">
        <el-button @click="showEdit.flag = false">取消</el-button>
        <el-button type="primary" @click="editCommit(showEdit.index === -1)">{{showEdit.index === -1 ? '添加' : '确认'}}</el-button>
      </div>
    </el-dialog>
    <div class="pagination">
      <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="pageIndex"
          :page-size="pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
      />
    </div>
	</div>
</template>

<script setup>
import Schart from 'vue-schart';
import { Edit, Delete, Search, Plus } from '@element-plus/icons-vue';
import {ref} from "vue";
import {ElNotification} from "element-plus";
import axios from "axios";

const searchInput = ref(""),
    showEdit = ref({
      flag: false,
      index: -1
    }),
    editor = ref(new Array(3).fill(''))

const allData = ref([]),
    tempData = ref([]),
    topicData = ref([]),
    parentTopics = ref([]),
    pageIndex = ref(1),
    pageSize = ref(5),
    pageTotal = ref(1)

axios.get('http://localhost:8080/topic/all').then(r => {
  const resp = r.data
  if (resp.status === 0){
    console.log(resp.data)
    allData.value = resp.data
    pageTotal.value = allData.value.length
    getData()
  }
})

function getData(targetData = topicData, selectData = allData){
  console.log(searchInput.value, selectData.value, pageIndex.value, pageSize.value, pageTotal.value)
  pageTotal.value = selectData.value.length
  targetData.value = selectData.value.filter((topic, index) => {
    return topic.topic_name.toLowerCase().indexOf(searchInput.value.toLowerCase()) >= 0
        && index >= (pageIndex.value - 1) * pageSize.value
        && index <= pageIndex.value * pageSize.value
  })
  console.log(targetData.value)
}

const handleSearch = () => {
  searchInput.value = searchInput.value.trim()
  tempData.value = allData.value
  allData.value = allData.value.filter(topic => {
    return topic.topic_name.toLowerCase().indexOf(searchInput.value.toLowerCase()) >= 0
  })
  getData(topicData, allData)
}

const handlePageChange = (val) => {
  pageIndex.value = val;
  getData()
}

const editTopic = (index) => {
  console.log(index)
  editShowOrHide(index)
}

// const deleteTopic = (index) => {
//   console.log(index)
//   axios.delete()
// }

function editShowOrHide(index = -1) {
  console.log('index', index)
  showEdit.value.index = index
  showEdit.value.flag ^= true
  editor.value[0] = topicData.value[index].topic_name
  editor.value[1] = topicData.value[index].topic_desc
  editor.value[2] = topicData.value[index].parent_topic_id
  if (showEdit.value.flag) {
    console.log(`http://localhost:8080/topic/${index === -1 ? 'all' : `parent_topic_id?topic_id=${topicData.value[showEdit.value.index].topic_id}`}`)
    axios.get(`http://localhost:8080/topic/${index === -1 ? 'all' : `parent_topic_id?topic_id=${topicData.value[showEdit.value.index].topic_id}`}`).then(r=>{
      if (r.data.status === 0){
        if (index===-1) parentTopics.value = r.data.data
        else  parentTopics.value = new Array(1).fill(r.data.data)
      }
    })
  }
}

const editCommit = (add) => {
  console.log(editor.value)
  if (add) {
    axios.post('http://localhost:8080/topic', JSON.stringify({
      topic_name: editor.value[0],
      topic_desc: editor.value[1],
      parent_topic_id: (editor.value[2] === "" ? null : editor.value[2]),
      topic_image: '12'
    }),{headers:{"Content-Type": 'application/json'}}).then(r=>{
      if(r.data.status===0)ElNotification.success('成功')
    })
  }else{
    let f = true
    if (editor.value[0].trim() !== ""){
      axios.patch(`http://localhost:8080/topic/topic_name?topic_id=${topicData.value[showEdit.value.index].topic_id}&topic_name=${editor.value[0]}`).then(r=>{
        if (r.data.status===1)f=false
      }).catch(e=>f=false)
    }
    if (editor.value[1].trim() !== "") {
      axios.patch(`http://localhost:8080/topic/topic_desc?topic_id=${topicData.value[showEdit.value.index].topic_id}&topic_desc=${editor.value[1]}`).then(r=>{
        if (r.data.status===1)f=false
      }).catch(e=>f=false)
      if(f)ElNotification.success('成功')
    }
  }
}
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

</style>
